<template>
  <div class="toast-container">
    <div class="toast-wrap" :class="position" v-show="show">
      <div class="toast-entity" v-if="!desc"><slot></slot></div>
      <div class="toast-entity" v-else v-text="desc"></div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },

    props: {
      show: {type: Boolean, toWay: true, default: false},
      type: {type: String, default: 'text'},
      position: {type: String, default: 'bottom'},
      desc: {type: String},
      delay: {type: Number, default: 3000}
    },

    watch: {
      show (show) {
        if (show && this.delay !== -1) {
          setTimeout(() => this.show = false, this.delay)
        }
      }
    },

    created () {
      if (this.show && this.delay !== -1) {
        setTimeout(() => this.show = false, this.delay)
      }
    }
  }
</script>

<style>
  .toast-container {
    text-align: center;
  }
  .toast-wrap {
    position: absolute; padding: 3px 6px;
  }
  .toast-wrap .toast-entity {
    padding: 8px 10px; border-radius: 12px;
    background: rgba(0, 0, 0, .6); color: white;
    z-index: 10;
  }
  .toast-wrap.center {top: 50%; left: 50%;}
  .toast-wrap.center .toast-entity { transform: translate(-50%, -50%); }
  .toast-wrap.top {top: 20%; left: 50%;}
  .toast-wrap.top .toast-entity { transform: translateX(-50%); }
  .toast-wrap.bottom {top: 80%; left: 50%;}
  .toast-wrap.bottom .toast-entity { transform: translateX(-50%); }
</style>
